<template>
  <div class="app-container">
    <div class="flex justify-between">
      <div>
          <el-button type="primary" icon="el-icon-plus" size="default" @click="addNewProfile">新增配置</el-button>
      </div>
      <div class="flex flex-wrap">
        <!-- <div>
          <span>状态：</span>
          <el-select v-model.number="listQuery.is_open"
                      class="filter-item marginRB10"
                      filterable
                      placeholder="请选择状态"
                      style="width: 200px"
          >
            <el-option
              v-for="item in selectList"
              :key="item.key"
              :label="item.lab"
              :value="item.key"
            ></el-option>
          </el-select>
        </div> -->
        <div>
            <!-- <el-date-picker
                v-model="datePickerValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleDatePicker"
            /> -->
            <el-date-picker
                v-model="listQuery.register_start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
            ></el-date-picker>
        </div>
        <div class="ml-4">
            <el-date-picker
                v-model="listQuery.register_end_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"
            ></el-date-picker>
        </div>
        <div class="ml-4">
            <el-input
                v-model.number="listQuery.room_code"
                class="marginRB10"
                clearable
                placeholder="请输入房间ID"
                style="width: 200px"
            ></el-input>
        </div>
        <el-button
          class="marginRB10"
          icon="el-icon-search"
          type="primary"
          @click="getList"
        >搜索
        </el-button>
        <el-button class="marginRB10" @click="resetSubmit">重置</el-button>
      </div>
    </div>

    <el-table
      ref="dataList"
      :data="menuList"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
      row-key="id"
      style="margin-bottom: 20px"
    >
      <el-table-column :index="indexMethod" type="index" width="150" label="编号"></el-table-column>
      <el-table-column label="开始时间" prop="register_start_time"></el-table-column>
      <el-table-column label="结束时间" prop="register_end_time"></el-table-column>
      <el-table-column label="房间ID" prop="room_codes"></el-table-column>
      <el-table-column label="游戏" prop="play_ids_name">
          <template slot-scope="{row}">
          {{row.play_ids_name.toString()}}
        </template>
      </el-table-column>
      <el-table-column label="注册人数" prop="register_count"></el-table-column>
      <el-table-column label="领取数量" prop="receive_count"></el-table-column>
      <el-table-column label="创建时间" prop="created_at" sortable width="250"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="{row}">
          <el-button
            size="mini"
            type="text"
            @click="handleDetail(row)"
            style="margin-right: 10px;"
          >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <cus-pagination
      v-show="total > 0"
      :limit.sync="listQuery.perPage"
      :page.sync="listQuery.page"
      :total="total"
      @pagination="getList"
    />

    <!-- 新增/编辑 弹窗 -->
    <el-dialog
      v-dialogDrag
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      center
      width="30%"
      @close="handleDialogClose"
    >
      <el-form
        ref="dataForm"
        :model="form"
        :rules="rules"
        label-width="80px"
        class="form"
      >
        <el-form-item label="开始时间" prop="register_start_time">
            <el-date-picker
            v-model="form.register_start_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="register_end_time">
            <el-date-picker
            v-model="form.register_end_time"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择结束时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="福利游戏" prop="play_ids">
            <el-select v-model="form.play_ids" multiple placeholder="请选择福利游戏">
                <el-option
                    class="w-full"
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="房间ID" prop="room_codes">
            <el-input v-model="form.room_codes" placeholder="请输入发布内容"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listData, saveData } from '@/api/operatingConfiguration/roomDrainage'
import { getData } from '@/api/interaction/waysToPlay'
export default {
  data() {
    return {
        datePickerValue: '',
        options: [],
        confirmBtn: false,
        listLoading: true,
        total: 0,
        listQuery: {
            page: 1,
            perPage: 10,
            register_end_time: '',
            register_start_time: '',
            room_code: ''
        },
        selectList: [
            { key: undefined, lab: '全部状态' },
            { key: 1, lab: '启用 ' },
            { key: 0, lab: '禁止' }
        ],
        checkedItems: [
            { key: 1, lab: '启用 ' },
            { key: 0, lab: '禁止' }
        ],
        menuList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
            update: '编辑',
            create: '新增'
        },
        form: {
            room_codes: undefined,
            play_ids: undefined,
            register_start_time: '',
            register_end_time: ''
        },
        rules: {
            room_codes: [{ required: true, message: '请输入房间ID', trigger: 'blur' }],
            play_ids: [{ required: true, message: '请选择游戏', trigger: 'blur' }],
            register_start_time: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
            register_end_time: [{ required: true, message: '请选择结束时间', trigger: 'blur' }]
        }
    }
  },
  created() {
    this.getList()
    this.handleGetData()
  },
  methods: {
    handleGetData() {
        getData({
            page: 1,
            per_page: 1000
        }).then(res => {
            this.options = res.data.list;
        });
    },
    indexMethod(index) {
      return (this.listQuery.page - 1) * this.listQuery.perPage + index + 1
    },
    getList() {
        this.listLoading = true
        for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
        }
        listData(this.listQuery).then(({ data }) => {
            for(let v of data.list) {
                v.play_ids = v.play_ids.split(',').map(Number)
                v.play_ids_name = []
                v.play_ids.map((item) => {
                    let names = []
                    this.options.map((param) => {
                        if(item === param.id){
                            v.play_ids_name.push(param.name)
                        }
                    })
                })
            }
            this.menuList = data.list
            this.total = data.meta.total
            this.listLoading = false
            this.confirmBtn = false
            this.totalData = [data.header]
        })
    },
    handleDetail(row) {
        this.dialogFormVisible = true
        this.dialogStatus = 'update'
        this.form = JSON.parse(JSON.stringify(row))
    },
    submitForm() {
        if (this.confirmBtn) return
        this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                this.confirmBtn = true
                let method = ''
                let formData = {}
                if(this.form.id) {
                    method = 'put'
                    formData.id = this.form.id
                }else {
                    method = 'post'
                    formData.id = ''
                }
                formData.room_codes = this.form.room_codes
                formData.play_ids = this.form.play_ids.toString()
                formData.register_start_time = this.form.register_start_time
                formData.register_end_time = this.form.register_end_time
                saveData(formData, method).then((response) => {
                    if (response.code === 200) {
                    this.getList()
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    })
                    this.dialogFormVisible = false
                    } else {
                        this.confirmBtn = false
                    }
                })
            }
        })
    },
    resetForm() {
      this.form = {
        name: undefined
      }
    },
    // 监听dialog关闭时的处理事件
    handleDialogClose() {
      if (this.$refs['dataForm']) {
        this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
      }
    },
    resetSubmit() {
      this.listQuery = {
        page: 1,
        perPage: 10
      }
      this.getList()
    },
    addNewProfile() {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
    },
    handleDatePicker(val) {
        console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
    .form{
        .el-date-editor, .el-select{
            width: 100%;
        }
    }
}
</style>